<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="关键词" prop="searchWord">
        <el-input
          v-model="queryParams.keyword"
          placeholder="请输入订单总号、业务单号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['dingdan:index:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['dingdan:index:import']"
        >导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['dingdan:index:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getPage"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column align="center" label="主键" prop="id" v-if="false"/>
      <el-table-column align="center" width="180" label="日期" prop="riqi" />
      <el-table-column align="center" width="180" label="确认日期" prop="qrrq" />
      <el-table-column align="center" width="180" label="订单总号" prop="ddzh" />
      <el-table-column align="center" width="180" label="业务单号" prop="ywdh" />
      <el-table-column align="center" width="180" label="客户名称" prop="khmc" />
      <el-table-column align="center" width="180" label="订单种类" prop="ddzl" />
      <el-table-column align="center" width="180" label="产品种类" prop="cpzl" />
      <el-table-column align="center" width="180" label="印品名称" prop="ypmc" />
      <el-table-column align="center" width="180" label="配套名称" prop="ptmc" />
      <el-table-column align="center" width="180" label="规格" prop="guige" />
      <el-table-column align="center" width="180" label="纸张" prop="zhizhang" />
      <el-table-column align="center" width="180" label="交货时间" prop="jhrq" />
      <el-table-column align="center" width="180" label="交货方式" prop="jhfs" />
      <el-table-column align="center" width="180" label="工艺单号" prop="gydh" />
      <el-table-column align="center" width="180" label="数量" prop="sum" />
      <el-table-column align="center" width="180" label="单价" prop="danjia" />
      <el-table-column align="center" width="180" label="金额" prop="jine" />
      <el-table-column align="center" width="180" label="版费" prop="banfei" />
      <el-table-column align="center" width="180" label="版费说明" prop="bfsm" />
      <el-table-column align="center" width="180" label="定金" prop="dingjin" />
      <el-table-column align="center" width="180" label="开票" prop="kaipiao" />
      <el-table-column align="center" width="180" label="制单人" prop="zdr" />
      <el-table-column align="center" width="180" label="外协单位" prop="wxdw" />
      <el-table-column align="center" width="180" label="后工要求" prop="hgyq" />
      <el-table-column align="center" width="180" label="包装要求" prop="bzyq" />
      <el-table-column align="center" width="180" label="客户文件" prop="khwj" />
      <el-table-column align="center" width="180" label="完成状态" prop="wczt" />
      <el-table-column align="center" width="180" label="系列" prop="xilie" />
      <el-table-column align="center" width="180" label="付款方式" prop="fkfs" />
      <el-table-column align="center" width="180" label="大区" prop="daqu" />
      <el-table-column align="center" width="180" label="客服组长" prop="kfzz" />
      <el-table-column align="center" width="180" label="收款金额" prop="skje" />
      <el-table-column align="center" width="180" label="备注" prop="beizhu" />
      <el-table-column align="center" width="180" label="收款日期" prop="skrq" />
      <el-table-column align="center" width="180" label="收款备注" prop="skbz" />
      <el-table-column align="center" width="180" label="渠道类型" prop="qdlx" />
      <el-table-column align="center" width="180" label="完结时间" prop="wjsj" />

      <el-table-column align="center" width="100" label="操作" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['dingdan:index:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['dingdan:index:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getPage"
    />

    <!-- 添加或修改单表对话框 -->
    <el-dialog :title="model.title" :visible.sync="model.open" width="80%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item>
              <el-checkbox v-model="form.jiaji"><font style="font-size: 20px;color: red;">[加急]</font></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <h1 align="center"><b>业务订单</b></h1>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务总号">
              <el-input v-model="form.ddzh" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="业务员" prop="ywy">
              <el-input v-model="form.ywy" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="部门">
              <el-input v-model="form.bumen" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="客服负责">
              <el-input v-model="form.kfzz" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="订单种类" prop="ddzl">
              <el-select v-model="form.ddzl" clearable>
                <el-option v-for="dict in dictData.ddzl" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="业务单号">
              <el-input v-model="form.ywdh" />
            </el-form-item>
          </el-col>
        </el-row>
        <div style="border: solid 1px lightgray;border-radius: 5px;margin-bottom: 12px;padding: 15px 15px 0px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="下单时间">
                <el-date-picker clearable size="small"
                            v-model="form.riqi"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="交货时间">
                <el-date-picker clearable size="small"
                            v-model="form.jhrq"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户文件" prop="khwj">
                <el-select v-model="form.khwj" clearable>
                  <el-option v-for="dict in dictData.khwj" :key="dict" :label="dict" :value="dict" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工艺单号">
                <el-input v-model="form.gydh" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户名称" prop="khmc">
                <el-select v-model="form.khmc" clearable filterable style="width: 99%" @change="changeKhmc">
                  <el-option v-for="dict in khxxList" :label="dict.name" :value="dict.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="客户代码">
                <el-input v-model="form.khdm" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="联系人">
                <el-input v-model="form.khlxr" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="电话">
                <el-input v-model="form.khdh" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="客户地址">
                <el-input v-model="form.khdz" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="大区">
                <el-input v-model="form.daqu" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-dialog :title="model.jph.title" :visible.sync="model.jph.open" width="880px" append-to-body>
            <el-form ref="jphczForm" :model="jphczForm" label-width="80px">
              <h3>精品盒材质要求</h3>
              <el-table :data="jphczForm.belows" style="width: 100%; border: 1px solid lightblue;">
                <template v-for="(item, idx) in jphczForm.items">
                  <el-table-column :prop="item.key" :label="item.label" align="center" header-align="center"
                                   :width="item.type === 'show' ? '100px' : ''">
                    <template slot-scope="scope">
                      <div style="height: 36px; line-height: 36px;">
                        <el-form-item label="" label-width="0" :prop="'belows.' + scope.$index + '.' + item.key">
                          <template v-if="item.type === 'select'">
                            <el-select v-model="scope.row[item.key]" clearable>
                              <el-option v-for="dict in dictData[item.key]" :key="dict" :label="dict" :value="dict" />
                            </el-select>
                          </template>
                          <template v-else-if="item.type === 'show'">{{ scope.row[item.key] }}</template>
                          <template v-else>
                            <el-input type="text" size="small" v-model="scope.row[item.key]" />
                          </template>
                        </el-form-item>
                      </div>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </el-form>
            <el-form ref="jphhgForm" :model="jphhgForm" label-width="80px">
              <h3>精品盒后工要求</h3>
              <el-table :data="jphhgForm.belows" style="width: 100%; border: 1px solid lightblue;">
                <template v-for="(item, idx) in jphhgForm.items">
                  <el-table-column :prop="item.key" :label="item.label" align="center" header-align="center"
                                   :width="item.type === 'show' ? '120px' : ''">
                    <template slot-scope="scope">
                      <div style="height: 36px; line-height: 36px;">
                        <el-form-item label="" label-width="0"
                                      :prop="'belows.' + scope.$index + '.' + item.key">
                          <template v-if="item.type === 'select'">
                            <el-select v-model="scope.row[item.key]" clearable>
                              <el-option v-for="dict in dictData[item.key]" :key="dict"
                                         :label="dict" :value="dict"/>
                            </el-select>
                          </template>
                          <template v-else-if="item.type === 'show'">{{ scope.row[item.key] }}
                          </template>
                          <template v-else>
                            <el-input type="text" size="small" v-model="scope.row[item.key]"/>
                          </template>
                        </el-form-item>
                      </div>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitJph">确 定</el-button>
              <el-button @click="cancelJph">取 消</el-button>
            </div>
          </el-dialog>
          <el-row>
            <el-col :span="7">
              <el-form-item label="产品种类">
                <el-select v-model="form.cpzl" clearable @change="changeCpzl">
                  <el-option v-for="dict in dictData['SPECIAL_cpzl']" :key="dict" :label="dict" :value="dict" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="盒型">
                <el-select v-model="form.hexing" clearable>
                  <el-option v-for="dict in dictData['SPECIAL_cpzl_' + form.cpzl + '_hexing']" :key="dict" :label="dict" :value="dict" />
                </el-select>
                <span v-if="form.cpzl === '精品盒'" style="padding-left: 10px;">
                  <el-button type="primary" icon="el-icon-info" size="mini" @click="showJPH">精品盒信息</el-button>
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="材质类型" prop="czlx">
                <el-select v-model="form.czlx" clearable>
                  <el-option v-for="dict in dictData.czlx" :key="dict" :label="dict" :value="dict" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="印品名称">
                <el-input v-model="form.ypmc" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="成品规格">
                <el-input v-model="form.guige" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="配套名称">
                <el-select v-model="form.ptmc" clearable>
                  <el-option v-for="dict in dictData.ptmc" :key="dict" :label="dict" :value="dict" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item label="材质" prop="caizhi">
                <el-select v-model="form.caizhi" clearable>
                  <el-option v-for="dict in dictData.caizhi" :key="dict" :label="dict" :value="dict" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="成品数量" prop="sum">
                <el-input type="number" :precision="0" v-model="form.sum" @input="calcMoney" />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item>
                <el-checkbox v-model="form.slzg" @change="changeSlzg">数量足够</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="结算">
                <el-col :span="4">
                  <el-form-item label="单价" prop="danjia">
                    <el-input type="number" :precision="2" v-model="form.danjia" @input="calcMoney" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="金额">
                    <el-input type="number" :precision="2" v-model="form.jine" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="运费">
                    <el-select v-model="form.yflx" clearable>
                      <el-option v-for="dict in dictData.yunfei" :key="dict" :label="dict" :value="dict" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="开票">
                    <el-select v-model="form.kaipiao" clearable>
                      <el-option v-for="dict in dictData.kaipiao" :key="dict" :label="dict" :value="dict" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="版费">
                    <el-input type="number" :precision="2" v-model="form.banfei" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="付定金">
                    <el-input type="number" :precision="2" v-model="form.dingjin" />
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="交货方式">
                <el-select v-model="form.jhfs" clearable>
                  <el-option v-for="dict in dictData.jhfs" :key="dict" :label="dict" :value="dict" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="付款方式">
                <el-select v-model="form.fkfs" clearable>
                  <el-option v-for="dict in dictData.fkfs" :key="dict" :label="dict" :value="dict" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="版费说明" prop="bfsm">
                <el-select v-model="form.bfsm" clearable>
                  <el-option v-for="dict in dictData.bfsm" :key="dict" :label="dict" :value="dict" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="定金账户" prop="djzh">
                <el-select v-model="form.djzh" clearable>
                  <el-option v-for="dict in dictData.djzh" :key="dict" :label="dict" :value="dict" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="生产要求">
                <el-select v-model="form.arr_scyq" clearable multiple style="width: 100%;" @change="$forceUpdate()">
                  <el-option v-for="dict in dictData.scyq" :key="dict" :label="dict" :value="dict" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-checkbox-group v-model="form.arr_ysyq" @change="$forceUpdate(); changeYs()">
                  <el-checkbox v-for="dict in dictCheckbox.ysyq" :key="dict" :label="dict">{{dict}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="颜色">
                <el-select v-model="form.yanse" clearable>
                  <el-option v-for="dict in dictData.yanse" :key="dict" :label="dict" :value="dict" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="后工要求">
                <el-select v-model="form.arr_hgyq" clearable multiple style="width: 100%;" @change="$forceUpdate()">
                  <el-option v-for="dict in hgyqList" :key="dict" :label="dict" :value="dict" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="包装要求">
                <el-select v-model="form.arr_bzyq" clearable multiple style="width: 100%;" @change="$forceUpdate()">
                  <el-option v-for="dict in dictData.bzyq" :key="dict" :label="dict" :value="dict" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="配套产品">
                <el-form ref="belowsForm" :model="belowsForm" label-width="80px" class="flex-container">
                  <!-- 内层表格 -->
                  <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleBelowAdd">添加</el-button>
                  <el-table :data="belowsForm.belows" style="width: 100%; border: 1px solid lightblue;">
                    <template v-for="(item, idx) in belowsForm.items">
                      <el-table-column :prop="item.key" :label="item.label" align="center" header-align="center"
                                       :width="idx === 0 ? '150px' : ''">
                        <template slot-scope="scope">
                          <div style="height: 36px; line-height: 36px;">
                            <el-form-item label="" label-width="0" :prop="'belows.' + scope.$index + '.' + item.key"
                                          :rules="belowRules[item.key]">
                              <template v-if="item.type === 'select'">
                                <el-select v-model="scope.row[item.key]" clearable>
                                  <el-option v-for="dict in dictData[item.key]" :key="dict" :label="dict" :value="dict" />
                                </el-select>
                              </template>
                              <template v-else>
                                <el-input type="text" size="small" v-model="scope.row[item.key]" />
                              </template>
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                    </template>
                    <el-table-column width="80px" align="center" header-align="center" label="操作">
                      <template slot-scope="scope">
                        <el-popconfirm title="确定要删除?" @confirm="() => handleBelowDel(scope.row)">
                          <template #reference>
                            <a href="javascript:">删除</a>
                          </template>
                        </el-popconfirm>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="特记事项">
                <el-input v-model="form.tjsx" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="版类型">
                <el-select v-model="form.blx" clearable>
                  <el-option v-for="dict in dictData.blx" :key="dict" :label="dict" :value="dict" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="备注">
                <el-input v-model="form.beizhu" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="收货人">
                <el-input v-model="form.shren" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电话">
                <el-input v-model="form.shdh" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收货地址">
                <el-input v-model="form.shdz" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="收货地区">
                <el-input v-model="form.shdq" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="生产经理">
                <el-input v-model="form.scjl" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="外协单位">
                <el-input v-model="form.wxdw" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="已发数量">
                <el-input type="number" :precision="0" v-model="form.yfsl" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="运费">
                <el-input type="number" :precision="2" v-model="form.qrrq" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="提交时间">
                <el-date-picker clearable size="small"
                  v-model="form.tjsj"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="接单">
                <el-input v-model="form.jiedan" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="下单确认">
                <el-input v-model="form.xdqr" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        
        <el-row>
          <el-col :span="16"><el-form-item></el-form-item></el-col>
          <el-col :span="8">
            <el-form-item label="业务审核">
              <el-input v-model="form.shenhe" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { pageDomain, getDomain, delDomain, saveDomain, genNo } from "@/api/shengchan/dingdan";
import { getDictData } from "@/api/shengchan/canshu";
import { getKhData } from "@/api/shengchan/kehu";
import { getToken } from "@/utils/auth";
import lodash from 'lodash';

export default {
  name: "Dingdan",
  components: {
  },
  data() {
    return {
      demo: {
          sheng: null, dishi: null, quxian: null
      },
        dishiList: [],
        quxianList: [],
      //按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      dataList: [],
      // 弹出层标题
      title: "业务订单",
      model: {
        open: false,
        title: "",
        jph: {
          open: false,
          title: "精品盒信息"
        }
      },
      exportUrl: "/dingdan/export",
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/dingdan/importData"
      },
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        keyword: undefined
      },
      // 表单参数
      form: {},
      jphForm: {
        cz: {
          items: [
            { key: 'zjzl', label: '组件种类', type: 'show' },
            { key: 'zjxl', label: '组件小类', type: 'show' },
            { key: 'caizhi', label: '材质种类', type: 'select' },
            { key: 'seshu', label: '色数', type: 'input' },
            { key: 'yanse', label: '颜色', type: 'select' },
            { key: 'guige', label: '规格', type: 'input' }
          ],
          belows: [
            { zjzl: '外盒', zjxl: '面纸', caizhi: null, seshu: null, yanse: null, guige: null },
            { zjzl: '外盒', zjxl: '内贴', caizhi: null, seshu: null, yanse: null, guige: null },
            { zjzl: '外盒', zjxl: '纸板', caizhi: null, seshu: null, yanse: null, guige: null },
            { zjzl: '内盒', zjxl: '面纸', caizhi: null, seshu: null, yanse: null, guige: null },
            { zjzl: '内盒', zjxl: '内贴', caizhi: null, seshu: null, yanse: null, guige: null },
            { zjzl: '内盒', zjxl: '纸板', caizhi: null, seshu: null, yanse: null, guige: null }
          ]
        },
        hg: {
            items: [
                { key: 'zjzl', label: '组件种类', type: 'show' },
                { key: 'zjxl', label: '组件细类', type: 'show' },
                { key: 'hgyq', label: '后工要求', type: 'show' },
                { key: 'beizhu', label: '备注', type: 'input' }
            ],
            belows: {
                '对开门书型盒': [
                    { zjzl: '内盒', zjxl: '面纸', hgyq: '模切', beizhu: null },
                    { zjzl: '内盒', zjxl: '纸板', hgyq: '模切', beizhu: null },
                    { zjzl: '外盒', zjxl: '纸板', hgyq: '开槽', beizhu: null },
                    { zjzl: '内盒', zjxl: '纸板', hgyq: '成型', beizhu: null },
                    { zjzl: '外盒', zjxl: '纸板', hgyq: '贴铁片', beizhu: null },
                    { zjzl: '内盒', zjxl: '纸板', hgyq: '贴磁铁', beizhu: null },
                    { zjzl: '外盒', zjxl: '面纸+内贴+纸板', hgyq: '裱面板', beizhu: null },
                    { zjzl: '内盒', zjxl: '面纸+内贴+纸板', hgyq: '裱内盒', beizhu: null },
                    { zjzl: '盒子', zjxl: '盒子', hgyq: '组装', beizhu: null },
                    { zjzl: '盒子', zjxl: '盒子', hgyq: '打包', beizhu: null }
                ],
                '后背不连接书型盒': [
                    { zjzl: '内盒', zjxl: '面纸', hgyq: '模切', beizhu: null },
                    { zjzl: '内盒', zjxl: '纸板', hgyq: '模切', beizhu: null },
                    { zjzl: '外盒', zjxl: '纸板', hgyq: '开槽', beizhu: null },
                    { zjzl: '内盒', zjxl: '纸板', hgyq: '成型', beizhu: null },
                    { zjzl: '外盒', zjxl: '纸板', hgyq: '贴铁片', beizhu: null },
                    { zjzl: '内盒', zjxl: '纸板', hgyq: '贴磁铁', beizhu: null },
                    { zjzl: '外盒', zjxl: '面纸+内贴+纸板', hgyq: '裱面板', beizhu: null },
                    { zjzl: '内盒', zjxl: '面纸+内贴+纸板', hgyq: '裱内盒', beizhu: null },
                    { zjzl: '盒子', zjxl: '盒子', hgyq: '组装', beizhu: null },
                    { zjzl: '盒子', zjxl: '盒子', hgyq: '打包', beizhu: null }
                ],
                '后连体天地盖': [
                    { zjzl: '上盖', zjxl: '面纸+内贴', hgyq: '模切', beizhu: null },
                    { zjzl: '下盖', zjxl: '面纸+内贴', hgyq: '模切', beizhu: null },
                    { zjzl: '上盖', zjxl: '纸板', hgyq: '模切', beizhu: null },
                    { zjzl: '下盖', zjxl: '纸板', hgyq: '模切', beizhu: null },
                    { zjzl: '上盖+下盖', zjxl: '纸板', hgyq: '开槽', beizhu: null },
                    { zjzl: '上盖', zjxl: '纸板', hgyq: '成型', beizhu: null },
                    { zjzl: '下盖', zjxl: '纸板', hgyq: '成型', beizhu: null },
                    { zjzl: '上盖+下盖', zjxl: '盒子', hgyq: '扣盖', beizhu: null },
                    { zjzl: '盒子', zjxl: '盒子', hgyq: '打包', beizhu: null }
                ],
                '后连体天地盖加中圈': [
                    { zjzl: '上盖', zjxl: '面纸+内贴', hgyq: '模切', beizhu: null },
                    { zjzl: '下盖', zjxl: '面纸+内贴', hgyq: '模切', beizhu: null },
                    { zjzl: '上盖+下盖', zjxl: '纸板', hgyq: '模切', beizhu: null },
                    { zjzl: '上盖+下盖', zjxl: '纸板', hgyq: '开槽', beizhu: null },
                    { zjzl: '中圈', zjxl: '纸板', hgyq: '裱中圈', beizhu: null },
                    { zjzl: '上盖+下盖', zjxl: '纸板', hgyq: '成型', beizhu: null },
                    { zjzl: '中圈', zjxl: '纸板', hgyq: '模切', beizhu: null },
                    { zjzl: '中圈', zjxl: '面纸', hgyq: '模切', beizhu: null },
                    { zjzl: '中圈', zjxl: '纸板', hgyq: '成型', beizhu: null },
                    { zjzl: '盒子', zjxl: '盒子', hgyq: '组装', beizhu: null },
                    { zjzl: '盒子', zjxl: '盒子', hgyq: '打包', beizhu: null }
                ],
                '天包地': [
                    { zjzl: '上盖', zjxl: '面纸+内贴', hgyq: '模切', beizhu: null },
                    { zjzl: '下盖', zjxl: '面纸+内贴', hgyq: '模切', beizhu: null },
                    { zjzl: '上盖', zjxl: '纸板', hgyq: '模切', beizhu: null },
                    { zjzl: '下盖', zjxl: '纸板', hgyq: '模切', beizhu: null },
                    { zjzl: '上盖+下盖', zjxl: '纸板', hgyq: '开槽', beizhu: null },
                    { zjzl: '上盖', zjxl: '纸板', hgyq: '成型', beizhu: null },
                    { zjzl: '下盖', zjxl: '纸板', hgyq: '成型', beizhu: null },
                    { zjzl: '上盖+下盖', zjxl: '盒子', hgyq: '扣盖', beizhu: null },
                    { zjzl: '盒子', zjxl: '盒子', hgyq: '打包', beizhu: null }
                ],
                '天地盖加中圈': [
                    { zjzl: '上盖', zjxl: '面纸+内贴', hgyq: '模切', beizhu: null },
                    { zjzl: '下盖', zjxl: '面纸+内贴', hgyq: '模切', beizhu: null },
                    { zjzl: '上盖+下盖', zjxl: '纸板', hgyq: '模切', beizhu: null },
                    { zjzl: '上盖+下盖', zjxl: '纸板', hgyq: '开槽', beizhu: null },
                    { zjzl: '中圈', zjxl: '纸板', hgyq: '裱中圈', beizhu: null },
                    { zjzl: '上盖+下盖', zjxl: '纸板', hgyq: '成型', beizhu: null },
                    { zjzl: '中圈', zjxl: '纸板', hgyq: '模切', beizhu: null },
                    { zjzl: '中圈', zjxl: '面板', hgyq: '模切', beizhu: null },
                    { zjzl: '中圈', zjxl: '纸板', hgyq: '成型', beizhu: null },
                    { zjzl: '盒子', zjxl: '盒子', hgyq: '组装', beizhu: null },
                    { zjzl: '盒子', zjxl: '盒子', hgyq: '打包', beizhu: null }
                ],
                '正常书型盒': [
                    { zjzl: '内盒', zjxl: '面纸', hgyq: '模切', beizhu: null },
                    { zjzl: '内盒', zjxl: '纸板', hgyq: '模切', beizhu: null },
                    { zjzl: '外盒', zjxl: '纸板', hgyq: '开槽', beizhu: null },
                    { zjzl: '内盒', zjxl: '纸板', hgyq: '成型', beizhu: null },
                    { zjzl: '外盒', zjxl: '纸板', hgyq: '贴铁片', beizhu: null },
                    { zjzl: '内盒', zjxl: '纸板', hgyq: '贴磁铁', beizhu: null },
                    { zjzl: '外盒', zjxl: '面纸+内贴+纸板', hgyq: '裱面板', beizhu: null },
                    { zjzl: '内盒', zjxl: '面纸+内贴+纸板', hgyq: '裱内盒', beizhu: null },
                    { zjzl: '盒子', zjxl: '盒子', hgyq: '组装', beizhu: null },
                    { zjzl: '盒子', zjxl: '盒子', hgyq: '打包', beizhu: null }
                ],
                '正常天地盖': [
                    { zjzl: '上盖', zjxl: '面纸+内贴', hgyq: '模切', beizhu: null },
                    { zjzl: '下盖', zjxl: '面纸+内贴', hgyq: '模切', beizhu: null },
                    { zjzl: '上盖', zjxl: '纸板', hgyq: '模切', beizhu: null },
                    { zjzl: '下盖', zjxl: '纸板', hgyq: '模切', beizhu: null },
                    { zjzl: '上盖+下盖', zjxl: '纸板', hgyq: '开槽', beizhu: null },
                    { zjzl: '上盖', zjxl: '纸板', hgyq: '成型', beizhu: null },
                    { zjzl: '下盖', zjxl: '纸板', hgyq: '成型', beizhu: null },
                    { zjzl: '上盖+下盖', zjxl: '盒子', hgyq: '扣盖', beizhu: null },
                    { zjzl: '盒子', zjxl: '盒子', hgyq: '打包', beizhu: null },
                ],
                '正对开书型盒': [
                    { zjzl: '内盒', zjxl: '面纸', hgyq: '模切', beizhu: null },
                    { zjzl: '内盒', zjxl: '纸板', hgyq: '模切', beizhu: null },
                    { zjzl: '外盒', zjxl: '纸板', hgyq: '开槽', beizhu: null },
                    { zjzl: '内盒', zjxl: '纸板', hgyq: '成型', beizhu: null },
                    { zjzl: '外盒', zjxl: '纸板', hgyq: '贴铁片', beizhu: null },
                    { zjzl: '内盒', zjxl: '纸板', hgyq: '贴磁铁', beizhu: null },
                    { zjzl: '外盒', zjxl: '面纸+内贴+纸板', hgyq: '裱面板', beizhu: null },
                    { zjzl: '内盒', zjxl: '面纸+内贴+纸板', hgyq: '裱内盒', beizhu: null },
                    { zjzl: '盒子', zjxl: '盒子', hgyq: '组装', beizhu: null },
                    { zjzl: '盒子', zjxl: '盒子', hgyq: '打包', beizhu: null }
                ]
            }
        }
      },
      jphczForm: {},
      jphhgForm: {},
      belowsForm: {},
      // 表单校验
      rules: {
        khmc: [
          { required: true, message: "客户名称不能为空", trigger: "blur" }
        ],
        value: [
          { required: true, message: "值不能为空", trigger: "blur" }
        ],
      },
      belowRules: {},
      dictCheckbox: {
        ysyq: ['按颜色','按签字稿文字','按盒型','单面印','双面印']
      },
      khxxList: [],
      hgyqList: [],
      dictData: {}
    };
  },
  created() {
    this.getPage();
    this.getDict();
    this.getKhxx();
  },
  methods: {
      changeSheng(v) {
          const dishi = this.dictData['sheng_' + v + '_dishi']
          console.log(v, 'sheng_' + v + '_dishi', dishi)
          this.dishiList = dishi
      },
      changeDishi(v) {
          const quxian = this.dictData['sheng_' + this.demo.sheng + '_dishi_' + v + '_xianqu']
          console.log(v, 'sheng_' + this.demo.sheng + '_dishi_' + v + '_quxian', quxian)
          this.quxianList = quxian
      },
    getKhxx() {
      this.khxxList = []
      getKhData().then(res => {
        if (res.code === 200) {
          this.khxxList = res.data
        }
      })
    },
    getDict() {
      this.dictData = {}
      this.hgyqList = []
      getDictData().then(res => {
        if (res.code === 200) {
          this.dictData = res.data
          this.hgyqList = lodash.cloneDeep(this.dictData.hgyq || [])
        }
      })
    },
    /** 自定义分页查询 */
    getPage() {
      this.loading = true;
      this.queryParams.params = {};
      pageDomain(this.queryParams).then(res => {
        this.dataList = res.records;
        this.total = res.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.model.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        cpzl: null,
        hexing: null,
        arr_scyq: [],
        arr_hgyq: [],
        arr_bzyq: [],
        arr_ysyq: []
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.current = 1;
      this.getPage();
    },
    /** 搜索按钮操作 */
    handlePage() {
      this.queryParams.current = 1;
      this.getPage();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      genNo().then(res => {
        this.loading = false;
        this.form.ywdh = res.data.ywdh;
        this.form.ddzh = res.data.ddzh;
        this.handleBelows();
        this.model.open = true;
        this.model.title = "添加" + this.title;
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true;
      this.reset();
      const id = row.id || this.ids
      if (!id) {
        this.$modal.msgError("请选中一行进行编辑");
        return
      }
      getDomain(id).then(res => {
        this.loading = false;
        const data = res.data;
        this.form = data;
        this.form.arr_scyq = data.scyq ? data.scyq.split(',') : [];
        this.form.arr_ysyq = data.ysyq ? data.ysyq.split(',') : [];
        this.form.arr_hgyq = data.hgyq ? data.hgyq.split(',') : [];
        this.form.arr_bzyq = data.bzyq ? data.bzyq.split(',') : [];
        this.handleBelows(this.form.ptcp);
        this.model.open = true;
        this.model.title = "修改" + this.title;
      });
    },
    calcMoney() {
      if (this.form.sum && this.form.danjia) {
        this.form.jine = Number(this.form.sum * this.form.danjia).toFixed(2)
      }
    },
    changeKhmc(v) {
      for (const kh of this.khxxList) {
        if (kh.name === v) {
          this.form.khdm = kh.code;
          this.form.khlxr = kh.user;
          this.form.khdh = kh.phone;
          this.form.khdz = kh.addr;
          break
        }
      }
    },
    changeCpzl(v) {
      this.form.hexing = ''
      if (v !== '精品盒') {
        this.form.jphcz = null
        this.form.jphhg = null
      }
    },
    showJPH() {
      this.handleJph(this.form)
      this.model.jph.open = true
    },
    submitJph() {
      this.form.jphcz = JSON.stringify(this.jphczForm.belows);
      this.form.jphhg = JSON.stringify(this.jphhgForm.belows);
      this.hgyqList = [];
      const hgyq = this.dictData.hgyq || [];
      const list = this.jphhgForm.belows.map(e => e.hgyq);
      this.hgyqList = [...new Set([...hgyq, ...list])];
      this.model.jph.open = false
    },
    cancelJph() {
      this.model.jph.open = false
    },
    changeYs() {
      const result = this.form.arr_scyq.filter(item => !this.dictCheckbox.ysyq.includes(item));
      this.form.arr_ysyq.forEach(e => {
        result.push(e)
      })
      this.form.arr_scyq = result
    },
    changeSlzg(t) {
      if (t) {
        this.form.tjsx = '数量足够'
      } else {
          this.form.tjsx = ''
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const jphcz = this.jphczForm.belows;
          if (jphcz) {
            this.form.jphcz = JSON.stringify(jphcz);
          }
          const jphhg = this.jphhgForm.belows;
          if (jphhg) {
              this.form.jphhg = JSON.stringify(jphhg);
          }
          const ptcp = this.belowsForm.belows;
          if (ptcp) {
            this.form.ptcp = JSON.stringify(ptcp);
          }
          this.form.scyq = this.form.arr_scyq.join(',');
          this.form.ysyq = this.form.arr_ysyq.join(',');
          this.form.hgyq = this.form.arr_hgyq.join(',');
          this.form.bzyq = this.form.arr_bzyq.join(',');
          this.buttonLoading = true;
          saveDomain(this.form).then(res => {
            this.$modal.msgSuccess("保存成功");
            this.model.open = false;
            this.getPage();
          }).finally(() => {
            this.buttonLoading = false;
          });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除数据项？').then(() => {
        this.loading = true;
        return delDomain(ids);
      }).then(() => {
        this.loading = false;
        this.getPage();
        this.$modal.msgSuccess("删除成功");
      }).finally(() => {
        this.loading = false;
      });
    },
    handleJph(data) {
      this.jphczForm = lodash.cloneDeep(this.jphForm.cz);
      this.resetForm("jphczForm");
      if (data.jphcz && data.jphcz !== '[]') {
        this.jphczForm.belows = JSON.parse(data.jphcz);
      }
      this.jphhgForm = {
          items: lodash.cloneDeep(this.jphForm.hg.items),
          belows: lodash.cloneDeep(this.jphForm.hg.belows[data.hexing] || [])
      };
      this.resetForm("jphhgForm");
      if (data.jphhg && data.jphhg !== '[]') {
          this.jphhgForm.belows = JSON.parse(data.jphhg);
      }
    },
    initBelowRules(names) {
      this.belowRules = {};
      if (names && names.length) {
        names.forEach(name => this.belowRules[name] = [ { required: true, message: '项目选项必填', trigger: 'blur' } ]);
      }
    },
    handleBelows(belows) {
      this.belowsForm = {
        items: [],
        belows: []
      };
      this.resetForm("belowsForm");
      //this.initBelowRules(names)
      const title = this.dictData.ptcp;
      if (title) {
        title.forEach(e => {
          const v = e.split(':');
          if (v && v.length) {
            this.belowsForm.items.push({ key: v[0], label: v[1], type: (v.length === 3 ? v[2] : 'input') });
          }
        });
      }
      if (belows) {
        this.belowsForm.belows = JSON.parse(belows);
      }
    },
    handleBelowAdd() {
      const belows = this.belowsForm.belows;
      const items = this.belowsForm.items;
      const newData = {}
      items.forEach(e => newData[e.key] = null );
      this.belowsForm.belows = [...belows, newData];
    },
    handleBelowDel(row) {
      const belows = [...this.belowsForm.belows];
      this.belowsForm.belows = belows.filter(item => item !== row);
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(this.exportUrl, {
        ...this.queryParams
      }, `${this.title}_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(res, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(res.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getPage();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    }
  }
};
</script>
